<template>
  <view class="property-fee-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">物业费缴费</view>
      <view class="header-subtitle">在线缴纳物业费、水电费</view>
    </view>

    <!-- 待缴费账单 -->
    <view class="pending-bills">
      <view class="section-title">
        <text class="title-text">待缴费账单</text>
        <text class="title-count">({{ pendingBills.length }})</text>
      </view>
      
      <view class="bill-list">
        <view 
          v-for="bill in pendingBills" 
          :key="bill.id" 
          class="bill-item"
          @click="goToBillDetail(bill)"
        >
          <view class="bill-icon" :style="{ background: bill.iconColor }">
            <u-icon :name="bill.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="bill-info">
            <view class="bill-header">
              <text class="bill-title">{{ bill.title }}</text>
              <text class="bill-amount">¥{{ bill.amount.toFixed(2) }}</text>
            </view>
            <view class="bill-details">
              <text class="bill-period">{{ bill.period }}</text>
              <text class="bill-due-date">到期：{{ bill.dueDate }}</text>
            </view>
            <view class="bill-status">
              <u-tag 
                :text="bill.statusText" 
                :type="bill.statusType" 
                size="mini"
              ></u-tag>
            </view>
          </view>
          <view class="bill-action">
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 快速缴费 -->
    <view class="quick-payment">
      <view class="section-title">
        <text class="title-text">快速缴费</text>
      </view>
      
      <view class="payment-methods">
        <view 
          v-for="method in paymentMethods" 
          :key="method.id"
          class="method-item"
          @click="selectPaymentMethod(method)"
        >
          <view class="method-icon" :style="{ background: method.color }">
            <u-icon :name="method.icon" color="#fff" size="24"></u-icon>
          </view>
          <text class="method-name">{{ method.name }}</text>
        </view>
      </view>
    </view>

    <!-- 缴费统计 -->
    <view class="payment-stats">
      <view class="section-title">
        <text class="title-text">缴费统计</text>
      </view>
      
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ stats.totalPaid.toFixed(2) }}</text>
          <text class="stat-label">累计缴费</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.paidCount }}</text>
          <text class="stat-label">已缴费</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.pendingCount }}</text>
          <text class="stat-label">待缴费</text>
        </view>
      </view>
    </view>

    <!-- 缴费记录 -->
    <view class="payment-records">
      <view class="section-title">
        <text class="title-text">最近缴费</text>
        <text class="view-all" @click="viewAllRecords">查看全部</text>
      </view>
      
      <view class="record-list">
        <view 
          v-for="record in recentRecords" 
          :key="record.id" 
          class="record-item"
          @click="viewRecordDetail(record)"
        >
          <view class="record-icon" :style="{ background: record.iconColor }">
            <u-icon :name="record.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="record-info">
            <view class="record-header">
              <text class="record-title">{{ record.title }}</text>
              <text class="record-amount">¥{{ record.amount.toFixed(2) }}</text>
            </view>
            <view class="record-details">
              <text class="record-time">{{ record.payTime }}</text>
              <text class="record-method">{{ record.methodName }}</text>
            </view>
          </view>
          <view class="record-status">
            <u-tag 
              :text="record.statusText" 
              type="success" 
              size="mini"
            ></u-tag>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 物业费缴费页面
 * @author Wu.Liang
 * @date 2025-01-21
 * @description 物业费缴费功能页面，包含待缴费账单、快速缴费、统计信息等
 */

import { ref, reactive, onMounted } from 'vue'

// 待缴费账单数据
const pendingBills = ref([
  {
    id: 1,
    title: '2025年1月物业费',
    amount: 150.00,
    period: '2025年1月',
    dueDate: '2025-01-31',
    statusText: '待缴费',
    statusType: 'warning',
    icon: 'home',
    iconColor: '#3742fa'
  },
  {
    id: 2,
    title: '2024年12月水电费',
    amount: 120.50,
    period: '2024年12月',
    dueDate: '2025-01-20',
    statusText: '已逾期',
    statusType: 'error',
    icon: 'flash',
    iconColor: '#ff9500'
  },
  {
    id: 3,
    title: '2024年12月物业费',
    amount: 150.00,
    period: '2024年12月',
    dueDate: '2025-01-15',
    statusText: '已逾期',
    statusType: 'error',
    icon: 'home',
    iconColor: '#3742fa'
  }
])

// 支付方式
const paymentMethods = ref([
  {
    id: 1,
    name: '微信支付',
    icon: 'wechat',
    color: '#07c160'
  },
  {
    id: 2,
    name: '支付宝',
    icon: 'alipay',
    color: '#1677ff'
  },
  {
    id: 3,
    name: '银联支付',
    icon: 'credit-card',
    color: '#ff6b35'
  },
  {
    id: 4,
    name: '余额支付',
    icon: 'wallet',
    color: '#f39c12'
  }
])

// 缴费统计
const stats = reactive({
  totalPaid: 1250.50,
  paidCount: 12,
  pendingCount: 3
})

// 最近缴费记录
const recentRecords = ref([
  {
    id: 1,
    title: '2024年11月物业费',
    amount: 150.00,
    payTime: '2024-11-30 16:45',
    methodName: '微信支付',
    statusText: '支付成功',
    icon: 'home',
    iconColor: '#3742fa'
  },
  {
    id: 2,
    title: '2024年11月水电费',
    amount: 95.80,
    payTime: '2024-11-28 14:30',
    methodName: '支付宝',
    statusText: '支付成功',
    icon: 'flash',
    iconColor: '#ff9500'
  },
  {
    id: 3,
    title: '2024年10月物业费',
    amount: 150.00,
    payTime: '2024-10-31 09:15',
    methodName: '微信支付',
    statusText: '支付成功',
    icon: 'home',
    iconColor: '#3742fa'
  }
])

// 页面跳转方法
const goToBillDetail = (bill) => {
  uni.navigateTo({
    url: `/pages/payment/detail?billId=${bill.id}&type=property`
  })
}

const selectPaymentMethod = (method) => {
  uni.showToast({
    title: `选择${method.name}`,
    icon: 'none'
  })
}

const viewAllRecords = () => {
  uni.navigateTo({
    url: '/pages/payment/list'
  })
}

const viewRecordDetail = (record) => {
  uni.navigateTo({
    url: `/pages/payment/detail?id=${record.id}&type=record`
  })
}

// 页面加载
onMounted(() => {
  loadPropertyFeeData()
})

// 数据加载方法
const loadPropertyFeeData = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载物业费数据')
  } catch (error) {
    console.error('加载物业费数据失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.property-fee-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  
  // 小屏幕适配
  @media screen and (max-width: 375px) {
    padding: 12px;
  }
  
  // 中等屏幕适配
  @media screen and (min-width: 376px) and (max-width: 768px) {
    padding: 16px;
  }
  
  // 大屏幕适配
  @media screen and (min-width: 769px) {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
}

.page-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px 0;
  
  .header-title {
    font-size: 48rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
  }
  
  .header-subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
  
  .title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .title-count {
    font-size: 28rpx;
    color: #999;
  }
  
  .view-all {
    font-size: 28rpx;
    color: #2d8cf0;
    cursor: pointer;
  }
}

.pending-bills,
.quick-payment,
.payment-stats,
.payment-records {
  margin-bottom: 24px;
}

.bill-list {
  .bill-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .bill-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .bill-info {
      flex: 1;
      min-width: 0;
      
      .bill-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .bill-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
        
        .bill-amount {
          font-size: 36rpx;
          font-weight: 700;
          color: #ff4757;
        }
      }
      
      .bill-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .bill-period,
        .bill-due-date {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .bill-status {
        display: flex;
        justify-content: flex-start;
      }
    }
    
    .bill-action {
      margin-left: 16px;
    }
  }
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  
  .method-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.95);
    }
    
    .method-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    
    .method-name {
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .stat-number {
      font-size: 48rpx;
      font-weight: 700;
      color: #2d8cf0;
      margin-bottom: 8px;
    }
    
    .stat-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.record-list {
  .record-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .record-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .record-info {
      flex: 1;
      min-width: 0;
      
      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .record-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
        
        .record-amount {
          font-size: 32rpx;
          font-weight: 700;
          color: #27ae60;
        }
      }
      
      .record-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .record-time,
        .record-method {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
    
    .record-status {
      margin-left: 16px;
    }
  }
}
</style>
